<template>
  <div
    :class="[
      'anov-part vdr',
      anovPart.className,
      active ? 'active' : 'inactive'
    ]"
    :id="anovPart.id"
    :style="style"
    @mousedown="bodyDown($event)"
    @touchstart="bodyDown($event)"
    @touchend="up($event)"
    ref="anovPart"
  >
    <div
      v-if="active"
      v-for="stick in sticks"
      class="vdr-stick"
      :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
      @mousedown.stop.prevent="stickDown(stick, $event)"
      @touchstart.stop.prevent="stickDown(stick, $event)"
      :style="vdrStick(stick)"
    ></div>
    <component :is="anovPart.id"></component>
    <!-- <slot></slot> -->
  </div>
</template>
<script>
import vdr from './vdr'
import { partServer, soundServer } from 'anov-core'
import { mapMutations, mapState } from 'vuex'
import { requireComponent, getKey } from './vueFiles'
import Vue from 'vue'
export default {
  props: {
    part: {
      type: Object,
      required: true
    },
    anovFile: {
      required: true,
      type: String
    }
  },
  computed: {
    ...mapState('cmlpanel', ['isPanelOpen', 'activeTab']),
    ...mapState('env', ['scaleRatio'])
  },
  watch: {
    activeTab: {
      handler: function(v) {
        if (v != 3) this.setIsDragOpen(false)
      },
      immediate: true
    },
    scaleRatio: {
      handler: function(v) {
        this.parentScaleY = v - 0
        this.parentScaleX = v - 0
      },
      immediate: true
    }
  },
  data() {
    // 传入属性进行覆盖
    const anovPart = {
      id: this.part.id ? this.part.id : 'partIdUndefined',
      componentSrc: this.part.componentSrc ? this.part.componentSrc : '',
      className: this.part.className ? this.part.className : '',
      scale: this.part.scale || 1,
      style: {
        width: '300px',
        height: '300px',
        left: 0,
        top: 0,
        zIndex: 'auto',
        ...Object.assign({}, this.part.style || {})
      }
    }
    return {
      anovPart,
      active: false,
      aspectRatio: true,
      // 可设置参数
      parentLimitation: true,
      isResizable: true,
      isDraggable: true,
      snapToGrid: false,
      gridX: 30,
      gridY: 30,
      minWidth: 50,
      minHeight: 50,
      axis: 'both', //x y both none,
      preventActiveBehavior: true,
      parentScaleX: 1,
      parentScaleY: 1,
      /**拖拽设置参数结束 */
      rawWidth: parseInt(anovPart.style.width),
      rawHeight: parseInt(anovPart.style.height),
      rawLeft: parseInt(anovPart.style.left),
      rawTop: parseInt(anovPart.style.top),
      rawRight: null,
      rawBottom: null,
      zIndex: anovPart.style.zIndex || 'auto',
      aspectFactor:
        parseInt(anovPart.style.width) / parseInt(anovPart.style.height),
      left: parseInt(anovPart.style.left),
      top: parseInt(anovPart.style.top),
      right: null,
      bottom: null,
      // 不变参数-暂时
      parentWidth: null,
      parentHeight: null,
      sticks: ['tl', 'tr', 'br', 'bl'],
      dragHandle: null,
      dragCancel: null,
      timer: null
    }
  },
  created() {
    // 监听拖拽通用配置更改
    partServer.addEventListener('changeDragOpt', v => {
      Object.assign(this, v.target.dragOpt)
    })
    // 根据路径获取组件并注册
    if (this.anovPart.componentSrc) {
      let relativeSrc =
        this.anovFile.replace(/^src/, '.').replace(/[\w-]+\.vue$/, '') +
        this.anovPart.componentSrc.replace(/^\.\//, '')
      const componentSrc = getKey(relativeSrc)
      const childrenComponent = requireComponent(componentSrc).default
      Vue.component(this.anovPart.id, childrenComponent)
      this.$options.name = this.anovPart.id
    }
  },
  mounted() {},
  methods: {
    ...mapMutations('pageServer', ['changePart']),
    ...mapMutations('partServer', ['setIsDragOpen']),
    init() {
      //组件初始化
      let part = this.$refs.anovPart
      Object.assign(part.style, this.anovPart.style)
      let tl = this.childrenInit()
      if (tl instanceof TimelineLite || tl instanceof TweenLite) {
        tl.vars.id = part.id
      }
      return tl
    },
    update() {
      this.$refs.anovPart.childrenUpdate()
    }, //组件更新
    reset() {}, //组件重载
    destory() {}, //组件销毁
    childrenInit() {
      for (let i = 0; i < this.$children.length; i++) {
        let val = this.$children[i]
        if (val.init) {
          if (this.anovPart.scale) {
            val.$el.style.transform = `scale(${this.anovPart.scale})`
            val.$el.style.transformOrigin = `0 0`
          }
          let tl = val.init()
          return tl
        } else {
          app.log(`${val.$options._componentTag} init method is not set`)
        }
      }
    },
    childrenUpdate() {
      for (let i of this.$children) {
        let val = this.$children[i]
        if (val.update) {
          val.update()
        } else {
          app.log(`${val.$options._componentTag} update method is not set`)
        }
      }
    }
  },
  mixins: [vdr],
  beforeDestroy() {
    partServer.removeEventListener('changeDragOpt')
  }
}
</script>
<style lang="scss" scoped>
.vdr {
  position: absolute;
  box-sizing: border-box;
}
.vdr.active::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  outline: 1px dashed rgba(0, 190, 255, 0.5);
  background-color: rgba(0, 82, 121, 0.15);
}
.vdr-stick {
  box-sizing: border-box;
  position: absolute;
  font-size: 1px;
  background: rgba(0, 190, 255, 1);
  border: 1px solid rgba(0, 190, 255, 0.8);
  // border-radius: 50%;
  box-shadow: 0 0 1px rgba(0, 190, 255, 0.8);
}
.inactive .vdr-stick {
  display: none;
}
.vdr-stick-tl,
.vdr-stick-br {
  cursor: nwse-resize;
}
.vdr-stick-tm,
.vdr-stick-bm {
  left: 50%;
  cursor: ns-resize;
}
.vdr-stick-tr,
.vdr-stick-bl {
  cursor: nesw-resize;
}
.vdr-stick-ml,
.vdr-stick-mr {
  top: 50%;
  cursor: ew-resize;
}
.vdr-stick.not-resizable {
  display: none;
}
</style>
